<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th style="width: 5rem;">姓名</th>
                    <th>与学生关系</th>
                    <th>年龄</th>
                    <!-- <th>出生日期</th> -->
                    <th>政治面貌</th>
                    <th>职业</th>
                    <th style="width: 20rem;">工作单位</th>
                    <th>年收入</th>
                    <th>联系方式</th>
                    <th>健康情况</th>
                    <th style="width: 10rem;">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v, i) in family_list" :key="i" class="custom-input">
                    <td style="width: 5rem;" data-label="姓名">
                        <span v-if="isEmpty(v.isEdit)">{{ v.familyName }}</span>
                        <input v-else v-model="v.familyName" />
                    </td>

                    <td data-label="与学生关系">
                        <span v-if="isEmpty(v.isEdit)">{{ v.familyRelation }}</span>
                        <input v-else v-model="v.familyRelation" />
                    </td>
                    <td data-label="年龄">
                        <span v-if="isEmpty(v.isEdit)">{{ v.age }}</span>
                        <input v-else type="number" v-model="v.age" />
                    </td>
                    <!-- <td data-label="出生日期">
                        <span v-if="isEmpty(v.isEdit)">{{ v.birthday }}</span>
                        <input v-else type="date" v-model="v.birthday" />
                    </td> -->
                    <td data-label="政治面貌">
                        <span v-if="isEmpty(v.isEdit)">{{ v.zzmm }}</span>
                        <input v-else v-model="v.zzmm" />
                    </td>
                    <td data-label="职业">
                        <span v-if="isEmpty(v.isEdit)">{{ v.job }}</span>
                        <input v-else v-model="v.job" />
                    </td>
                    <td data-label="工作单位">
                        <span v-if="isEmpty(v.isEdit)">{{ v.workPlace }}</span>
                        <input v-else v-model="v.workPlace" />
                    </td>
                    <td data-label="年收入">
                        <span v-if="isEmpty(v.isEdit)">{{ v.yearMoney }}</span>
                        <input type="number" v-else v-model="v.yearMoney" />
                    </td>
                    <td data-label="联系电话">
                        <span v-if="isEmpty(v.isEdit)">{{ v.phone }}</span>
                        <input v-else v-model="v.phone" />
                    </td>
                    <td data-label="健康情况">
                        <span v-if="isEmpty(v.isEdit)">{{ v.health }}</span>
                        <input v-else v-model="v.health" />
                    </td>

                    <td data-label="操作">
                        <el-button v-if="!isEmpty(v.isEdit)" @click="doEdit(v)" type="text" icon="el-icon-check">
                            保存
                        </el-button>
                        <el-button v-if="isEmpty(v.isEdit)" :disabled="oneEdit" @click="willEdit(v)" type="text"
                            icon="el-icon-edit">
                            修改
                        </el-button>

                        <el-button @click="doDelete(v)" type="text" icon="el-icon-delete">删除</el-button>
                    </td>
                </tr>
                <tr v-if="addV">
                    <td data-label="姓名">
                        <input v-model="addForm.familyName" />
                    </td>
                    <td data-label="与学生关系">
                        <input v-model="addForm.familyRelation" />
                    </td>
                    <td data-label="年龄">
                        <input type="number" v-model="addForm.age" />
                    </td>
                    <!-- <td data-label="出生日期">
                        <input type="date" v-model="addForm.birthday" />
                    </td> -->
                    <td data-label="政治面貌">
                        <input v-model="addForm.zzmm" />
                    </td>
                    <td data-label="职业">
                        <input v-model="addForm.job" />
                    </td>
                    <td data-label="工作单位">
                        <input v-model="addForm.workPlace" />
                    </td>
                    <td data-label="年收入">
                        <input type="number" v-model="addForm.yearMoney" />
                    </td>
                    <td data-label="联系电话">
                        <input v-model="addForm.phone" />
                    </td>
                    <td data-label="健康情况">
                        <input v-model="addForm.health" />
                    </td>

                    <td data-label="操作">
                        <el-button @click="doAdd" type="text" icon="el-icon-check">保存</el-button>
                        <el-button @click="addV = false;" type="text" icon="el-icon-close">取消</el-button>
                    </td>
                </tr>
                <tr>
                    <td colspan="9" style="text-align: center;">
                        <el-button @click="addV = true;" :disabled="addV" style="display: inline-block;" type="text"
                            icon="el-icon-plus">新增一条</el-button>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>

import { getOwnFamily, addOwnFamily, deleteOwnFamily, editOwnFamily } from "@/api/stuCQS/basedata/member";
import { fullLoading, isEmpty } from "@/api/helpFunc";
import {
    getOwnInfo
} from "@/api/stuCQS/basedata/student";

export default {
    name: "family-member",
    data() {
        return {
            isEmpty,
            family_list: [],

            addV: false,

            addForm: {

            },
            editForm: {

            },

            oneEdit: false,
            ownPhone: null
        }
    },
    created() {
        this.getOwnInfo();
        this.getOwnFamily();
    },
    methods: {
        async getOwnInfo() {
            let res = await getOwnInfo();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    let data = {
                        ...res.data
                    };
                    this.ownPhone = data.phone;
                }
            }
        },
        willEdit(v) {
            this.editForm = { ...v };
            v.isEdit = true;
            this.oneEdit = true;
        },
        async doEdit(v) {
            let sdata = { ...v };
            if (isEmpty(sdata.familyName)) {
                this.$message.info("请填写成员名称");
                return;
            }
            if (isEmpty(sdata.age)) {
                this.$message.info("请填写成员年龄");
                return;
            }
            if (isEmpty(sdata.familyRelation)) {
                this.$message.info("请填写与学生关系");
                return;
            }
            // if (isEmpty(sdata.birthday)) {
            //     this.$message.info("请填写出生日期");
            //     return;
            // }
            if (isEmpty(sdata.zzmm)) {
                this.$message.info("请填写政治面貌");
                return;
            }
            if (isEmpty(sdata.job)) {
                this.$message.info("请填写职业");
                return;
            }
            if (isEmpty(sdata.workPlace)) {
                this.$message.info("请填写工作单位");
                return;
            }
            if (isEmpty(sdata.yearMoney)) {
                this.$message.info("请填写年收入");
                return;
            }

            if (isEmpty(sdata.phone)) {
                this.$message.info("请填写联系方式");
                return;
            }

            if (sdata.phone == this.ownPhone) {
                this.$message.info("不能填写本人电话");
                return;
            }

            if (isEmpty(sdata.health)) {
                this.$message.info("请填写健康情况");
                return;
            }
            let loading = fullLoading(this);
            let res = await editOwnFamily(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.getOwnFamily();
            }
            this.oneEdit = false;
            v.isEdit = undefined;
        },
        async doAdd() {
            let sdata = { ...this.addForm };
            if (isEmpty(sdata.familyName)) {
                this.$message.info("请填写成员名称");
                return;
            }
            if (isEmpty(sdata.familyRelation)) {
                this.$message.info("请填写与学生关系");
                return;
            }
            // if (isEmpty(sdata.birthday)) {
            //     this.$message.info("请填写出生日期");
            //     return;
            // }
            if (isEmpty(sdata.zzmm)) {
                this.$message.info("请填写政治面貌");
                return;
            }
            if (isEmpty(sdata.job)) {
                this.$message.info("请填写职业");
                return;
            }
            if (isEmpty(sdata.workPlace)) {
                this.$message.info("请填写工作单位");
                return;
            }
            if (isEmpty(sdata.yearMoney)) {
                this.$message.info("请填写年收入");
                return;
            }

            if (isEmpty(sdata.phone)) {
                this.$message.info("请填写联系方式");
                return;
            }

            if (sdata.phone == this.ownPhone) {
                this.$message.info("不能填写本人电话");
                return;
            }

            if (isEmpty(sdata.health)) {
                this.$message.info("请填写健康情况");
                return;
            }

            let loading = fullLoading(this);
            let res = await addOwnFamily(sdata);
            loading.close();
            if (res.code == 200) {
                this.addForm = {};
                this.$message.success(res.msg);
                this.getOwnFamily();
            }
            this.addV = false;
        },

        async getOwnFamily() {
            let res = await getOwnFamily();
            if (res.code == 200) {
                this.family_list = [...res.data];
            }
        },

        async doDelete(val) {
            let id = val.id;

            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await deleteOwnFamily(id);
                loading.close();
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getOwnFamily();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}

</script>
<style scoped>
table {
    border: 1px solid #ccc;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    table-layout: fixed;
    font-size: 12px;
}

table tr {
    border: 1px solid #ddd;
    padding: 5px;
}

table th,
table td {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

td input {
    width: 98%;
    display: block;
    margin: 0 auto;
    font-size: 12px;
}

@media screen and (max-width: 600px) {

    table {
        border: 0;
    }

    table thead {
        display: none;
    }

    table tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }

    table td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
        border-bottom: 0;
    }

    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}

.note {
    max-width: 80%;
    margin: 0 auto;
}
</style>
